<template>
    <view class="page-wrap">
        <scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
            <view class="list-item" v-for="(item, index) in list" :key="index">{{ index }}</view>
        </scroll-list>
        <global-components ref="global-components" :loading="false"></global-components>
    </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            list: [],
            option: {
                size: 15, // 分页大小
                auto: true // 自动加载列表
            }
        };
    },
    computed: {},
    methods: {
        // 加载数据
        load(paging) {
            setTimeout(() => {
                for (let i = 0; i < paging.size; i++) {
                    this.list.push(i);
                }
                // 加载成功
                this.$refs.list.loadSuccess({ list: this.list, total: 50 });
                // 加载失败
                // this.$refs.list.loadFail();
            }, Math.random() * 1000);
        },
        // 刷新刷剧
        refresh(paging) {
            setTimeout(() => {
                this.list = [];
                for (let i = 0; i < paging.size; i++) {
                    this.list.push(i);
                }
                // 刷新成功
                this.$refs.list.refreshSuccess({ list: this.list, total: 30 });
                // 刷新失败
                // this.$refs.list.refreshFail();
            }, Math.random() * 1000);
        }
    },
    watch: {},
    onLoad(option) {},
    onShow() {},
    onHide() {},
    onUnload() {},
    onReachBottom() {},
    onPageScroll(event) {},
    onPullDownRefresh() {},
    onShareAppMessage(options) {}
};
</script>

<style scoped lang="scss">
.page-wrap {
    .list-item {
        height: 30rpx;
    }
}
</style>
